<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>业绩管理</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/performance.css">
    <link rel="stylesheet" href="css/public/public.css">
    <link rel="stylesheet" href="css/layui/css/layui.css">
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/page.css">
</head>

<body id="main">

    <div class="yeji_header">
        <p>业绩管理</p>
    </div>
    <div class="yeji_con">
        <form action="" method="post" id="pubForm">
            <div class="inp1">
                <a>选择日期:</a>
                <div class="begun">
                    <span class="fa fa-times-circle-o" id="chaone"></span>
                    <span class="fa fa-table inp1_span"></span>
                    <!-- <input type="text" id="lxcselector1"> -->
                    <input type="text" placeholder="开始日期" id="begun_inp">&nbsp;-
                </div>
                <div class="end">
                    <span class="fa fa-times-circle-o" id="chatwo"></span>
                    <span class="fa fa-table"></span>
                    <input type="text" placeholder="结束日期" id="end_inp">
                </div>
            </div>
            <div class="inp2">
                <a>部门:</a>
                <input type="text" placeholder="请选择部门" class="inp2_in">
                <span class="fa fa-chevron-down inp2_span"></span>
                <ul class="inp2_ul">
                    <!-- <li class="inp2_ul_li">
                        <option value="符老师a">符老师</option>
                    </li>
                    <li class="inp2_ul_li">
                        <option value="薛亚飞a">薛亚飞</option>
                    </li>
                    <li class="inp2_ul_li">
                        <option value="李文博a">李文博</option>
                    </li>
                    <li class="inp2_ul_li">
                        <option value="张林林a">张林林</option>
                    </li> -->
                </ul>
            </div>
            <div class="inp3">
                <a>员工:</a>
                <input type="text" placeholder="员工姓名" class="inp3_in">
                <span class="fa fa-chevron-down inp3_span"></span>
                <ul class="inp3_ul">
                    <!-- <li>
                        <option value="符老师a">经理</option>
                    </li>
                    <li>
                        <option value="符老师b">经理a</option>
                    </li>
                    <li>
                        <option value="符老师c">经理b</option>
                    </li>
                    <li>
                        <option value="符老师d">经理c</option>
                    </li> -->
                </ul>
            </div>
            <div class="inp4 ">
                <span class="fa fa-search"></span>
                <a href="javascript:void(0)"><input class="pubBtn" type="button" value="搜索" id="searchBtn"></a>
            </div>
        </form>
    </div>
    <div class="yeji_con2">
        <p class="yeji_con2_num">
            <span>报名量:</span>
            <strong>100</strong>
        </p>
        <p class="yeji_con2_spend">
            <span>交费量:</span>
            <strong>100</strong>
        </p>
        <p class="yeji_con2_total">
            <span>业绩:</span>
            <strong>￥21,000</strong>
        </p>
    </div>
    <div class="pic">
        <div class="chart" id="chart"></div>
    </div>
    <div class="table">
        <div class="tableHead">
            <table>
                <tr class="tabletext_list">
                    <th></th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>电话</th>
                    <th>毕业院校</th>
                    <th>专业</th>
                    <th>状态</th>
                    <th>紧急联系人</th>
                    <th>紧急联系人电话</th>
                </tr>
            </table>
        </div>
        <div class="tabletext">
            <table>
                <!-- <tr>
                    <td>1</td>
                    <td>冉小冉</td>
                    <td>女</td>
                    <td>18</td>
                    <td>15378789725</td>
                    <td>石河子大学</td>
                    <td>IT大神</td>
                    <td>已缴费</td>
                    <td>father</td>
                    <td>12345677898</td>
                </tr> -->
            </table>
            <div id="page"></div>
        </div>

    </div>
</body>

</html>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/ipUrl.js"></script>
<script src="js/xlPaging.js"></script>
<script src="js/page.js"></script>
<script src="css/layui/layui.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts-en.common.js"></script>
<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>


<script>
    // $("#page").on("click", "ul li", function () {
    //     pageNum = localStorage.pageNum;
    //     // indexAjax(pageNum);
    // });
    // $(".inp3_ul li option").click(function () {
    //     console.log($(this).val());
    // });
    // 日历
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#begun_inp'
        });
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#end_inp'
        });
    });
    // 员工下拉选框
    var onOff = true;
    $('.inp2_in').click(function () {
        $('.inp3_ul').hide();
        if (onOff) {
            $('.inp2_ul').hide().slideDown(500, function () {
                $('.inp2_ul').css('display', 'block');
            });
            $('.inp2_span').css({
                transform: 'rotate(-180deg)',
                transition: '0.5s'
            });
            onOff = false;
        }
        else {
            $('.inp2_ul').slideUp(500, function () {
                $('.inp2_ul').css('display', 'none');
            });
            $('.inp2_span').css({
                transform: 'rotate(0deg)',
                transition: '0.5s'
            });
            onOff = true;
        }
    });
    $(".inp2_ul_li").on('click', function () {
        animatefn1();
    });
    $(".inp2_in").blur(function () {
        animatefn1();
    });
    function animatefn1() {
        $('.inp2_ul').slideUp(500);
        $('.inp2_span').css({
            transform: 'rotate(0deg)',
            transition: '0.5s'
        });
        onOff = true;
    }
    // 部门下拉选框
    $('.inp3_in').click(function () {
        $('.inp2_ul').hide();
        if (onOff) {
            $('.inp3_ul').hide().slideDown(500, function () {
                $('.inp3_ul').css('display', 'block');
            });
            $('.inp3_span').css({
                transform: 'rotate(-180deg)',
                transition: '0.5s'
            });
            onOff = false;
        }
        else {
            $('.inp3_ul').slideUp(500, function () {
                $('.inp3_ul').css('display', 'none');
            });
            $('.inp3_span').css({
                transform: 'rotate(0deg)',
                transition: '0.5s'
            });
            onOff = true;
        }
    });
    $(".inp3_ul_li").on('click', function () {
        animatefn2();
    });
    $(".inp3_in").blur(function () {
        animatefn2();
    });
    function animatefn2() {
        $('.inp3_ul').slideUp(500);
        $('.inp3_span').css({
            transform: 'rotate(0deg)',
            transition: '0.5s'
        });
        onOff = true;
    }
    var applyArr = [];
    var monthArr = [];
    var rateArr = [];
    var referArr = [];
    // 柱状图ajax
    $.ajax({
        url: 'http://192.168.3.76:9999/oaSystem/graph',
        type: 'post',
        data: {
            // 提取json数据中的值,传到后台(必选值)
            // deptName: dataObj.result[0].deptName,//获取数据中的deptName的值
            // empId: dataObj.result[0].empId,//获取数据中的empId的值
            // jobName: dataObj.result[0].jobName//获取数据中的jobName值
            // currentPage:'1',
            // rows:'10',
            empId: '10001',
            deptName: '市场部',
            empName: '',
            startTime: '2019-10-01 00:00:00',
            endTime: ''
        },
        dataType: 'json',
        success: function (data) {
            console.log(data);
            for (var i = 0; i < data.result.length; i++) {
                applyArr.push(data.result[i].apply);
                monthArr.push(data.result[i].month);
                rateArr.push(data.result[i].rate);
                referArr.push(data.result[i].refer);
            }
            //簇状图
            var myChart = echarts.init(document.getElementById('chart'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },

                legend: {
                    data: ['报名量', '咨询量', '转化率']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '人数（人）',
                        min: 0,
                        max: 10,
                        interval: 2,
                        axisLabel: {
                            formatter: '{value} '
                        }
                    },
                    {
                        type: 'value',
                        name: '百分',
                        min: 0,
                        max: 100,
                        interval: 20,
                        axisLabel: {
                            formatter: '{value} '
                        }
                    }
                ],
                series: [
                    {
                        name: '报名量',
                        type: 'bar',
                        data: [applyArr[0], applyArr[1], applyArr[2], applyArr[3], applyArr[4], applyArr[5], applyArr[6], applyArr[7], applyArr[8], applyArr[9], applyArr[10], applyArr[11]]
                    },
                    {
                        name: '咨询量',
                        type: 'bar',
                        data: [referArr[0], referArr[1], referArr[2], referArr[3], referArr[4], referArr[5], referArr[6], referArr[7], referArr[8], referArr[9], referArr[10], referArr[11]]
                    },
                    {
                        name: '转化率',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [rateArr[0], rateArr[1], rateArr[2], rateArr[3], rateArr[4], rateArr[5], rateArr[6], rateArr[7], rateArr[8], rateArr[9], rateArr[10], rateArr[11]]
                    }
                ]
            };
            myChart.setOption(option);

        },
        error: function (xhr, ero) {
            console.error(ero);
        }
    });

    // 日历表单清空按钮
    // 开始日期
    $('#begun_inp').focus(function () {
        $("#chaone").css('display', 'block');
    });
    $("#chaone").click(function () {
        $('#begun_inp').val('');
        $(this).css('display', 'none');
    });
    // 结束日期
    $('#end_inp').focus(function () {
        $("#chatwo").css('display', 'block');
    });
    $("#chatwo").click(function () {
        $('#end_inp').val('');
        $(this).css('display', 'none');
    });
    // 给所有input添加点击后的边框颜色
    var a = -1;
    $("input[type='text']").each(function (i) {
        $("input[type='text']:eq(" + i + ")").focus(function () {
            if (a != -1) {
                $("input[type='text']:eq(" + a + ")").removeClass('bor');
            }
            $(this).addClass('bor');
            a = i;
        });
    });
    // 获取data中用户id
    var empId = localStorage.getItem('jsonId');//获取key为jsonId的localStrage的value
    var dataObj = eval("(" + empId + ")");//使用eval方法将String类型的数据转化为JSON类型
    // var totalPage = 10;
    var dataPage;


    // indexAjax(1);
    // function indexAjax(page) {
    // 获取底部表格学生人员的信息
    $.ajax({
        url: performanceURL + ':9999/oaSystem/resultstudent',
        type: 'post',
        data: {
            empId: '10001',
            rows: '10',
            currentPage: 1,
            deptName: '市场部'
        },
        dataType: 'json',
        success: function (data) {
            // console.log('resultstudent:'+data);
            // console.log(page, dataPage, "++++++")
            dataPage = data.result.length;
            $('.tabletext table').empty();
            for (var i = 0; i < 2; i++) {
                $('.tabletext table').append('<tr><td>' + (i + 1) + '</td><td>' + data.result[i].studentName + '</td><td>' + data.result[i].studentSex + '</td><td>' + data.result[i].age + '</td><td>' + data.result[i].telphone + '</td><td>' + data.result[i].schoolName + '</td><td>' + data.result[i].major + '</td><td>' + data.result[i].stateName + '</td><td>' + data.result[i].emergencyName + '</td><td>' + data.result[i].emergencyContact + '</td></tr>');
            }
            // 页码
            $("#page").paging({
                nowPage: 1, // 当前页码
                pageNum: dataPage / 2, // 总页码
                buttonNum: 2, //要展示的页码数量
                canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
                showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
                callback: function (page) { //回调函数
                    $.ajax({
                        url: performanceURL + ':9999/oaSystem/resultstudent',
                        type: 'post',
                        data: {
                            empId: '10001',
                            // jobName: dataObj.result[0].jobName,
                            rows: '2',
                            currentPage: page,
                            deptName: '市场部'
                        },
                        dataType: 'json',
                        success: function (data) {
                            console.log(data);
                            $('.tabletext table').empty();
                            for (var i = 0; i < 2; i++) {
                                $('.tabletext table').append('<tr><td>' + (i + 1) + '</td><td>' + data.result[i].studentName + '</td><td>' + data.result[i].studentSex + '</td><td>' + data.result[i].age + '</td><td>' + data.result[i].telphone + '</td><td>' + data.result[i].schoolName + '</td><td>' + data.result[i].major + '</td><td>' + data.result[i].stateName + '</td><td>' + data.result[i].emergencyName + '</td><td>' + data.result[i].emergencyContact + '</td></tr>');
                            }
                        },
                        error: function (xhr, error) {
                            console.error(error);
                        }
                    });
                }
            });
        },
        error: function (xhr, ero) {
            console.error(ero);
        }
    });
    // }


    // 获取报名量,缴费量,业绩,转化率
    $.ajax({
        url: performanceURL + ':9999/oaSystem/apply',
        type: 'post',
        data: {
            deptName: dataObj.result[0].deptName,
            empId: dataObj.result[0].empId,
            jobName: dataObj.result[0].jobName,
            rows: '10',
            currentPage: '1'
        },
        dataType: 'json',
        success: function (data) {
            console.log("报名量，缴费量")
            console.log(data);
            $(".yeji_con2_total strong").html(data.yeji);
            $(".yeji_con2_num strong").html(data.baoming);
            $(".yeji_con2_spend strong").html(data.yijiaofei);
        },
        error: function (xhr, ero) {
            console.log(ero);
        }
    });
    // 部门 ajax请求

    $.ajax({
        url: performanceURL + ':9999/oaSystem/emp',
        type: 'post',
        data: {
            // 提取json数据中的值,传到后台(必选值)
            // deptName: dataObj.result[0].deptName,//获取数据中的deptName的值
            // empId: dataObj.result[0].empId,//获取数据中的empId的值
            // jobName: dataObj.result[0].jobName//获取数据中的jobName值
            deptName: '市场部',
            empId: '10001',
            jobName: '市场经理'
        },
        dataType: 'json',
        success: function (data) {
            console.log('部门');
            console.log(data);
            $('.inp2_ul').empty();
            for (var i = 0; i < data.job.length; i++) {
                $('.inp2_ul').append('<li class="inp2_ul_li"><option value="' + data.job[i] + '">' + data.job[i] + '</option></li>');
            }
            $('.inp2_ul_li option').click(function () {
                $('.inp2_in').val($(this).html());
                //员工ajax请求
                $.ajax({
                    url: performanceURL + ':9999/oaSystem/emp',
                    type: 'get',
                    data: {
                        // 提取json数据中的值,传到后台(必选值)
                        // deptName: dataObj.result[0].deptName,//获取数据中的deptName的值
                        // empId: dataObj.result[0].empId,//获取数据中的empId的值
                        // jobName: dataObj.result[0].jobName//获取数据中的jobName值
                        deptName: $(".inp2_in").val(),
                        empId: '10001',
                        jobName: '市场经理'
                    },
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        $('.inp3_ul').empty();
                        if (data.emp) {
                            for (var i = 0; i < data.emp.length; i++) {
                                $('.inp3_ul').append('<li class="inp3_ul_li"><option value="' + data.emp[i] + '">' + data.emp[i] + '</option></li>');
                            }

                            $('.inp3_ul li option').click(function () {
                                $('.inp3_in').val($(this).html());
                            });
                        }
                    },
                    error: function (xhr, ero) {
                        console.log(ero);
                    }
                });
            });
        },
        error: function (xhr, ero) {
            console.log(ero);
        }
    });
    // 搜索接口
    $('#searchBtn').click(function () {
        $.ajax({
            url: performanceURL + ':9999/oaSystem/resultstudent',
            type: 'post',
            data: {
                // 提取json数据中的值,传到后台(必选值)
                // deptName: dataObj.result[0].deptName,//获取数据中的deptName的值
                empId: dataObj.result[0].empId,//获取数据中的empId的值
                // jobName: dataObj.result[0].jobName//获取数据中的jobName值
                currentPage: '1',
                rows: '10',
                start: $("#bugun_inp").val(),
                end: $("#end_inp").val(),
                // empId: '10001',
                jobName: $('.inp2_in').val(),
                deptName: $('.inp3_in').val()
            },
            dataType: 'json',
            success: function (data) {
                console.log('搜索');
                console.log(data)
                $('.tabletext table').empty();
                if (data.result) {
                    $(".tabletext table").empty();
                    for (var i = 0; i < data.result.length; i++) {
                        $('.tabletext table').append('<tr><td>' + (i + 1) + '</td><td>' + data.result[i].studentName + '</td><td>' + data.result[i].studentSex + '</td><td>' + data.result[i].age + '</td><td>' + data.result[i].telphone + '</td><td>' + data.result[i].schoolName + '</td><td>' + data.result[i].major + '</td><td>' + data.result[i].stateName + '</td><td>' + data.result[i].emergencyName + '</td><td>' + data.result[i].emergencyContact + '</td></tr>');
                    }
                }
            },
            error: function (xhr, ero) {
                console.log(ero);
            }
        });
    });
</script>